<template>
  <div id="hello">我是菜单</div>
  {{ count }}
  <input type="button" value="点我" @click="count++">

</template>

<script lang="ts" setup>
import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref} from 'vue'

let count = ref(0)

// 挂载之前
onBeforeMount(() => {
  let div = document.querySelector("#hello")
  console.log("创建之前----", div)
})

onMounted(() => {
  let div = document.querySelector("#hello")
  console.log("创建----", div)
})

onBeforeUpdate(() => {
  console.log("更新之前----")
})

onUpdated(() => {
  console.log("更新----")
})

onBeforeUnmount(() => {
  console.log("卸载之前")
})

onUnmounted(() => {
  console.log("卸载")
})

</script>

<style scoped>

</style>